<template>
    <div class="page">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="会员管理" name="second">
                <div class="features">
                    <el-button size="mini" @click="isAddVip = true,clear1()">添加会员</el-button>
                    <el-button size="mini" @click="ischingzhi = true">会员充值</el-button>
                    <el-input  class="right_input right" size="mini" v-model="UserBo.phone"   placeholder="手机号"></el-input>
                    <el-button  class="right_button right" @click="queryVip" size="mini">搜索</el-button>
                </div>
                <!--                <div>-->
<!--                    <div class="vip_management">会员管理sss<el-image class="vip_img" :src="require('/public/image/vip/paixu.png')"></el-image></div>-->
<!--                </div>-->
                <el-form>
                    <el-form>
                        <template>
                            <el-table size="mini"
                                      :data="userList.records"
                                      style="width: 100%">
                                <el-table-column
                                        prop="userId"
                                        label="编号"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="userName"
                                        label="姓名"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="userLevel"
                                        label="会员等级"
                                        width="100">
                                </el-table-column>

                                <el-table-column
                                        prop="userPhone"
                                        label="手机号"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="userMoney"
                                        label="账户余额"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="userCumulative"
                                        label="累计充值"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="userIntegral"
                                        label="积分"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="userBirthday"
                                        label="创建时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="userDiscount"
                                        label="优惠力度%"
                                        width="120">
                                </el-table-column>
                                <el-table-column label="消费记录">
                                    <template slot-scope="scope">
                                        <el-button type="primary" size="mini"  @click="xiaofei = true,menBerXiaoFei(scope.row.userId)">消费记录</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="充值记录">
                                    <template slot-scope="scope">
                                        <el-button type="success" size="mini"  @click="chongzhi = true,menBerChongZhi(scope.row.userId)">充值记录</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="warning"  @click="updateUserSelect(scope.row.userId),centerDialogVisible=true">修改</el-button>
                                        <el-button size="mini" type="danger"  @click="menBerUserId(scope.row.userId)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-form>
                </el-form>
                <div style="text-align: center">
                    <el-pagination
                            @size-change="queryVip"
                            @current-change="queryVip"
                            :current-page.sync="UserBo.page.current"
                            :page-size.sync="UserBo.page.size"
                            :page-sizes="[3, 6]"
                            layout="total, prev, pager, next,sizes"
                            :total="this.userDataTotal">
                    </el-pagination>
                </div>
            </el-tab-pane>

<!--            <el-tab-pane label="等级管理" name="first">-->
<!--                <div class="features">-->
<!--                    <el-button size="mini" @click="isAddVipLevel = true">添加会员等级</el-button>-->
<!--                </div>-->
<!--                <div>-->
<!--                    <div class="vip_management">等级管理<el-image class="vip_img" :src="require('/public/image/vip/paixu.png')"></el-image></div>-->
<!--                </div>-->
<!--                <template >-->
<!--                    <el-table size="mini"-->
<!--                              :data="tableData"-->
<!--                              style="width: 100%">-->
<!--                        <el-table-column-->
<!--                                prop="id"-->
<!--                                label="序号"-->
<!--                                width="204.8">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="name"-->
<!--                                label="等级名称"-->
<!--                                width="204.8">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="lever"-->
<!--                                label="折扣比%"-->
<!--                                width="204.8">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="phone"-->
<!--                                label="备注"-->
<!--                                width="204.8">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="Balance"-->
<!--                                label="默认"-->
<!--                                width="204.8">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="operating"-->
<!--                                label="操作"-->
<!--                                width="204.8">-->
<!--                            <el-button size="mini" @click="isbianjiVip = true">编辑</el-button>-->
<!--                            <el-button size="mini">删除</el-button>-->
<!--                        </el-table-column>-->
<!--                    </el-table>-->
<!--                </template>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="实体卡管理" name="third">-->
<!--                <div class="features">-->
<!--                    <el-button size="mini" @click="isAddshitika = true">添加实体卡</el-button>-->
<!--                </div>-->
<!--                <div>-->
<!--                    <div class="vip_management">实体卡管理<el-image class="vip_img" :src="require('/public/image/vip/paixu.png')"></el-image></div>-->
<!--                </div>-->
<!--                <template >-->
<!--                    <el-table size="mini"-->
<!--                              :data="tableData"-->
<!--                              style="width: 100%">-->
<!--                        <el-table-column-->
<!--                                prop="id"-->
<!--                                label="序号"-->
<!--                                width="174.85">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="id"-->
<!--                                label="卡号"-->
<!--                                width="174.85">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="name"-->
<!--                                label="二维码"-->
<!--                                width="174.85">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="lever"-->
<!--                                label="使用状态"-->
<!--                                width="174.85">-->
<!--                            <el-button size="mini">正常使用</el-button>-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="phone"-->
<!--                                label="用户"-->
<!--                                width="174.85">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="Balance"-->
<!--                                label="消费时间"-->
<!--                                width="174.85">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="operating"-->
<!--                                label="操作"-->
<!--                                width="174.85">-->
<!--                            <el-button size="mini">删除</el-button>-->
<!--                        </el-table-column>-->
<!--                    </el-table>-->
<!--                </template>-->
<!--            </el-tab-pane>-->
        </el-tabs>

        <!-- 修改。弹出框 -->
        <el-dialog
                title="编辑会员"
                :visible.sync="centerDialogVisible"
                width="25%"
                center>
            <span slot="footer" class="dialog-footer">
                <div class="dialog_name xinxi">会员姓名：
                    <el-input disabled="disabled" v-model="user.userName" @input="change($event)" class="name_text" placeholder="手机号/邮箱"></el-input>
                </div>
                <div class="dialog_pwd xinxi">会员密码：
                    <el-input v-model="user.userPassword" @input="change($event)" class="name_text" placeholder="输入密码"></el-input>
                </div>
                <div class="dialog_pwd xinxi">支付密码：
                    <el-input v-model="user.userPaymentCode" @input="change($event)" class="name_text" placeholder="输入支付密码"></el-input>
                </div>
                <div  class="dialog_pwd xinxi">会员手机：
                    <el-input v-model="user.userPhone" @input="change($event)" class="name_text" placeholder="手机号"></el-input>
                </div>
                <el-button class="xinxi" style="width: 20%;margin-top: 25px;" @click="updateNemBer" type="primary">修改</el-button>
                <el-button class="xinxi" style="width: 20%;margin-top: 25px;margin-left: 100px" @click="centerDialogVisible=false"   type="primary">取消</el-button>
            </span>
        </el-dialog>
        <!-- 添加会员。弹出框 -->
        <el-dialog
                title="添加会员"
                :visible.sync="isAddVip"
                width="25%"
                center>
            <span slot="footer" class="dialog-footer">
                <div class="xinxi">会员账号：
                    <el-input  v-model="users.userCode" @input="change($event)" class="name_text" placeholder="请输入姓名"></el-input>
                </div>
                <div class="xinxi">会员姓名：
                    <el-input  v-model="users.userName" @input="change($event)" class="name_text" placeholder="请输入姓名"></el-input>
                </div>
                <div class="xinxi">手   机   号：
                    <el-input  v-model="users.userPhone" @input="change($event)" class="name_text" placeholder="请输入电话"></el-input>
                </div>
                <div class="xinxi">会员密码：
                    <el-input v-model="users.userPassword" @input="change($event)" class="name_text" placeholder="请输入密码"></el-input>
                </div>
                <div class="xinxi">支付密码：
                    <el-input  v-model="users.userPaymentCode" @input="change($event)" class="name_text" placeholder="请输入密码"></el-input>
                </div>
<!--                <div class="dialog_level xinxi">等  级：-->
<!--                    <template>-->
<!--                      <el-select style="width: 80% " v-model="vip_level" @input="change($event)" placeholder="请选择">-->
<!--                        <el-option-->
<!--                                v-for="item in options"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                      </el-select>-->
<!--                    </template>-->
<!--                </div>-->
<!--                <div class="dialog_phone">邮  箱：-->
<!--                    <el-input class="name_text" v-model="vip_email" @input="change($event)" placeholder="请输入邮箱"></el-input>-->
<!--                </div>-->
                <el-button class="xinxi" style="width: 25%;margin-top: 25px;margin-left: -30px" @click="saveVip" type="primary">添加</el-button>
                <el-button class="xinxi" style="width: 25%;margin-top: 25px;margin-left: 30px"  @click="isAddVip=false" type="primary">取消</el-button>
            </span>
        </el-dialog>
        <!-- 会员充值 -->
        <el-dialog
                title="会员充值码"
                :visible.sync="ischingzhi"
                width="25%"
                center>
            <span slot="footer" style="text-align: left;line-height: 50px" class="dialog-footer">
                <!-- 这是一个二维码 -->
           <div class="hycz" >手机号：
                    <el-input style="margin-left: 52px;" v-model="userChongZhi.phone" @input="change($event)" class="name_text" placeholder="手机号"></el-input>
                </div>
                 <div class="hycz">确认手机号：
                    <el-input  v-model="pwd2" @input="change($event)" class="name_text" placeholder="确认手机号"></el-input>
                </div>
                <div class="hycz">充值金额：
                    <el-input  v-model="userChongZhi.je" style="margin-left: 35px;" @input="change($event)" class="name_text" placeholder="充值金额"></el-input>
                </div>
              <el-button class="xinxi" style="width: 20%;margin-top: 25px;" @click="vipChongQian()" type="primary">充值</el-button>
                <el-button class="xinxi" style="width: 20%;margin-top: 25px;margin-left:20px" @click="ischingzhi=false"  type="primary">取消</el-button>
            </span>
        </el-dialog>
        <!-- 会员充值/消费 -->
        <el-dialog
                title="会员充值/消费"
                :visible.sync="isxiaofei"
                width="50%"
                center>
            <span slot="footer" class="dialog_footer">
                <div class="footer_title">
                    <el-input size="mini" v-model="footer_phone" @input="change($event)" class="phone_email" placeholder="手机号/邮箱"></el-input>
                    <el-button size="mini"  class="select_phone_email" type="primary">搜索</el-button>
                    <el-input size="mini" v-model="recharge_or_consumption" @input="change($event)" style="width: 7vw;margin-left: 15vw" placeholder="手机号/邮箱"></el-input>
                    <el-button size="mini" class="select_phone_email" type="danger">充值</el-button>
                    <el-button size="mini" class="select_phone_email" type="success">消费</el-button>
                </div>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="182">
                </el-table-column>
                <el-table-column
                        label="日期"
                        width="182">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="182">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        width="182"
                        show-overflow-tooltip>
                </el-table-column>
                </el-table>
            </span>
        </el-dialog>
        <!-- 积分兑换 -->
        <el-dialog
                title="积分兑换"
                :visible.sync="isduihuan"
                width="50%"
                center>
            <span slot="footer" class="dialog-footer">
                <div class="dialog_name xinxi">会员姓名：
                    <el-input v-model="redeem_name" @input="change($event)" class="name_text" placeholder="手机号/邮箱"></el-input>
                </div>
                <div class="dialog_pwd xinxi">兑换物品：
                    <el-input v-model="redeem_article"  @input="change($event)" class="name_text" placeholder="兑换物品"></el-input>
                </div>
                <div class="dialog_phone">兑换数量：
                    <el-input v-model="redeem_quantity"  @input="change($event)" class="name_text" placeholder="兑换数量"></el-input>
                </div>
                 <div class="dialog_phone">消费积分：
                    <el-input v-model="redeem_integral"  @input="change($event)" class="name_text" style="margin-top: 15px" placeholder="消费积分"></el-input>
                </div>
                <el-button class="xinxi" style="width: 50%;margin-top: 25px" type="primary">完成</el-button>
            </span>
        </el-dialog>
        <!-- 添加会员等级 -->
        <el-dialog
                title="添加会员等级"
                :visible.sync="isAddVipLevel"
                width="50%"
                center>
            <span slot="footer" class="dialog-footer">
                <div class="dialog_name xinxi">会员等级名称：
                    <el-input v-model="vip_level_name" @input="change($event)" class="name_text" placeholder="请输入会员等级名称"></el-input>
                </div>
                <div style="padding-left: 1vw" class="dialog_pwd xinxi">折扣比(%)：
                    <el-input v-model="vip_discount" @input="change($event)" style="width: 80%" class="name_text" placeholder="请输入折扣比"></el-input>
                </div>
                <div style="margin-left: 2.2vw" class="dialog_phone">备注：
                    <el-input v-model="vip_remarks" @input="change($event)" class="name_text" placeholder="请输入备注"></el-input>
                </div>
                <el-button class="xinxi" style="width: 50%;margin-top: 25px" type="primary">完成</el-button>
            </span>
        </el-dialog>
        <!-- 添加实体卡 -->
        <el-dialog
                title="添加实体卡"
                :visible.sync="isAddshitika"
                width="40%"
                center>
            <span slot="footer" class="dialog-footer">
                <div class="dialog_name xinxi">生成实体卡数量:：
                    <el-input v-model="discount" @input="change($event)" class="name_text" style="margin: 15px 0 15px 0" placeholder="请输入生成实体卡的数量"></el-input>
                </div>
                <el-button class="xinxi" style="width: 30%;margin-top: 25px" type="primary">完成</el-button>
            </span>
        </el-dialog>
        <!-- 编辑会员等级,点击编辑获取会员信息给表中赋值 -->
        <el-dialog
                title="编辑会员等级"
                :visible.sync="isbianjiVip"
                width="50%"
                center>
            <span slot="footer" class="dialog-footer">
                <div class="dialog_name xinxi">等级名称：
                    <el-input v-model="level_name" @input="change($event)" class="name_text" placeholder="请输入会员等级名称"></el-input>
                </div>

                <div class="dialog_pwd xinxi">折扣比%：
                    <el-input v-model="discount" @input="change($event)" class="name_text" placeholder="请输入折扣比"></el-input>
                </div>
                <div class="dialog_phone">备注信息：
                    <el-input v-model="Remarks" @input="change($event)" class="name_text" placeholder="请输入备注"></el-input>
                </div>
                <el-button class="xinxi" style="width: 50%;margin-top: 25px" type="primary">完成</el-button>
            </span>
        </el-dialog>
        <!-- 会员充值记录 -->
        <el-dialog
                title="充值记录"
                :visible.sync="chongzhi"
                width="45%"
                center>
            <span slot="footer" class="dialog_footer">
                  <template>
                    <el-table
                            :data="chongZhimenBerList.records"
                            style="width: 100%">
                        <el-table-column
                                prop="users.userName"
                                label="会员名称"
                                width="140">
                      </el-table-column>
                      <el-table-column
                              prop="memRecharge"
                              label="充值金额"
                              width="140">
                      </el-table-column>
                      <el-table-column
                              prop="memBalance"
                              label="剩余余额"
                              width="140">
                      </el-table-column>
                         <el-table-column
                                 prop="memRechargeTime"
                                 label="充值时间"
                                 width="140">
                      </el-table-column>
                         <el-table-column
                                 prop="clerk.clerkName"
                                 label="操作员工"
                                 width="140">
                      </el-table-column>

                    </el-table>
                  </template>
                 <div style="text-align: center">
                    <el-pagination
                            @size-change=" menBerChongZhi(menBerBo.userId)"
                            @current-change=" menBerChongZhi(menBerBo.userId)"
                            :current-page.sync="menBerBo.page.current"
                            :page-size.sync="menBerBo.page.size"
                            :page-sizes="[3, 6]"
                            layout="total, prev, pager, next,sizes"
                            :total="this.chongZhimenBerDataTotal">
                    </el-pagination>
                </div>
                <el-button type="primary" style="margin-left: 72px;margin-top: 20px" @click="chongzhi = false">关闭</el-button>
            </span>

        </el-dialog>
        <!-- 会员消费记录-->
        <el-dialog
                title="消费记录"
                :visible.sync="xiaofei"
                width="45%"
                center>
            <span slot="footer" class="dialog_footer">
                  <template>
                    <el-table
                            :data="xiaoFeiMemBerList.records"
                            style="width: 100%">
                      <el-table-column
                              prop="users.userName"
                              label="会员名称"
                              width="140">
                      </el-table-column>
                      <el-table-column
                              prop="memConsumption"
                              label="消费金额"
                              width="140">
                      </el-table-column>
                         <el-table-column
                                 prop="memBalance"
                                 label="卡内余额"
                                 width="140">
                      </el-table-column>
                        <el-table-column
                                prop="memConsumptionTime"
                                label="消费时间"
                                width="140">
                      </el-table-column>
                        <el-table-column
                                prop="clerk.clerkName"
                                label="操作员工"
                                width="140">
                      </el-table-column>
                    </el-table>
                  </template>

                 <div  style="text-align: center">
                    <el-pagination
                            @size-change=" menBerXiaoFei(menBerBo.userId)"
                            @current-change=" menBerXiaoFei(menBerBo.userId)"
                            :current-page.sync="menBerBo.page.current"
                            :page-size.sync="menBerBo.page.size"
                            :page-sizes="[3, 6]"
                            layout="total, prev, pager, next,sizes"
                            :total="this.xiaoFeimenBerDataTotal">
                    </el-pagination>
                </div>
                <el-button type="primary" style="margin-left: 72px;margin-top: 20px" @click="xiaofei = false">关闭</el-button>
            </span>

        </el-dialog>


    </div>
</template>

<script>
  export default {
    name: "vip",
    data() {
      return {
        //会员管理右上角搜索
        vip_searchfor_right: '',
        activeName: 'second',
        tableData: [
          {
            id: 1,
            name: "老王",
            lever: 2,
            phone: 111,
            blance: 222,
            integral: 333,
            date: "2020-2-3",
          }
        ],
        //弹出框返回值
        centerDialogVisible: false,
        isAddVip: false,
        ischingzhi: false,
        isxiaofei: false,
        isduihuan: false,
        isAddVipLevel: false,
        isAddshitika: false,
        isbianjiVip: false,
        chongzhi: false,
        xiaofei:false,
        //弹出框属性
        //添加会员属性
        addVip_level: {
          vip_level_name: "",
          vip_discount: "",
          vip_remarks: "",
        },
        //添加会员属性
        addVip: {
          vip_name: "",
          vip_phone: "",
          vip_pwd: "",
          vip_level: "",
          vip_email: "",
        },
        //会员充值，消费
        vip_dialog_footer: {
          footer_phone: '',
          recharge_or_consumption: "",
        },
        //积分兑换属性
        redeem: {
          redeem_name: "",
          redeem_article: "",
          redeem_quantity: "",
          redeem_integral: ""
        },
        //编辑会员等级
        edit_vip_level: {
          level_name: "",
          discount: "",
          Remarks: ""
        },
        //添加实体卡
        generate_card: {
          genrete_card_Quantity: '',
        },
        //编辑会员
        edit_vip:{
          edit_vip_name:'',
          edit_vip_pwd:'',
          edit_vip_levels:'',
          edit_vip_phone:''
        },
        //vip选项卡
        options: [
          {
            lable: "VIP",
            value: 1,
          },
          {
            lable: "SILVET VIP",
            value: 2,
          },
          {
            lable: "GOLDEN VIP",
            value: 3,
          }
        ],
          //会员充值
          userChongZhi:{
              userBusinessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId,
              phone:null,
              je:null,
              clearkId:JSON.parse(sessionStorage.getItem("clerk")).clerkId,
          },


          pwd2:null,

          //添加会员
          users:{
              userCode:null,
              userPassword:null,
              userPaymentCode:null,
              userPhone:null,
              userName:null,
              userBusinessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId,
              userPicture:null,

          },
          //根据商家ID查询自家店铺会员
          UserBo:{
              page: {
                  current: 1,
                  size: 6
              },
              userBusinessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId,
              phone:null,
          },
          //根据商家ID查询自家店铺会员返回的集合
          userList:{

          },
          //根据商家ID查询自家店铺会员返回总行数
          userDataTotal:null,
          //根据会员ID查出他的会员卡信息
          menBerBo:{
              page: {
                  current: 1,
                  size: 3
              },
              userId:null,
          },
          //会员充值集合
          chongZhimenBerList:{

          },
          chongZhimenBerDataTotal:null,
          //会员消费集合
          xiaoFeiMemBerList:{

          },
          xiaoFeimenBerDataTotal:null,

          //修改会员信息
          user:{
              userName:null,
              userPhone:null,
              userPassword:null,
              userPaymentCode:null,

          },


      }
      },
        methods: {
        //删除会员
            menBerUserId(id){
                this.$axios.post("administration/users/deleteMenBer",id).then(response=>{
                    let com=response.data
                    let corf=confirm("确定要删除吗");
                    if(corf==true){
                        if(com.code==200){
                            alert(com.message)
                            this.queryVip()
                        }else {
                            alert(com.message);
                        }
                    }

                })
            },
        //会员充值
            vipChongQian(){
                if(this.userChongZhi.phone==""){
                    alert("手机号不能为空")
                    return false
                }
                if(this.pwd2==""){
                    alert("确认手机号不能为空")
                    return false
                }
                if(this.userChongZhi.phone!=this.pwd2){
                    alert("两次手机号不一致")
                    return false
                }
                this.$axios.post("administration/users/vipChongQian",this.userChongZhi).then(response=>{
                    let com=response.data
                    if(com.code==200){
                        alert(com.message)
                        this.ischingzhi=false
                        this.queryVip()
                    }else {
                        alert(com.message);
                    }
                })

            },
        //添加会员
            clear1(){
                 this.users.userPaymentCode=null
                this.users.userPassword=null
                this.users.userPhone=null
                this.users.userCode=null
                this.users.userName=null
            },
            saveVip(){
                this.$axios.post("administration/users/saveVip",this.users).then(response=>{
                    let com=response.data
                    if(com.code==200){
                        alert(com.message)
                        this.isAddVip=false;
                        this.queryVip()
                    }else {
                        alert(com.message);
                    }
                })
            },
        //查询所有会员信息
            queryVip(){
                this.$axios.post("administration/users/userMember",this.UserBo).then(response=>{
                    this.userList=response.data
                    this.userDataTotal=response.data.total
                })
            },
            //会员充值记录
            menBerChongZhi(userId){
               this.menBerBo.userId=userId;
                this.$axios.post("administration/member/selectMemberChongZhi",this.menBerBo).then(response=>{
                    this.chongZhimenBerList=response.data
                    this.chongZhimenBerDataTotal=response.data.total
                })
            },
            //会员消费记录
            menBerXiaoFei(userId){
                this.menBerBo.userId=userId;
                this.$axios.post("administration/member/selectMemberXiaoFei",this.menBerBo).then(response=>{
                    this.xiaoFeiMemBerList=response.data
                    this.xiaoFeimenBerDataTotal=response.data.total
                })
            },
            //修改前显示信息
            updateUserSelect(userId){
                this.$axios.post("administration/users/updateUserSelect",userId).then(response=>{
                    this.user=response.data
                })
            },
            //修改用户信息
            updateNemBer(){
                this.$axios.post("administration/users/updateNemBer",this.user).then(response=>{
                    let com=response.data
                    if(com.code==200){
                        alert(com.message)
                        this.centerDialogVisible=false;
                        this.queryVip()
                    }else {
                        alert(com.message);
                    }

                })
            },

          handleClick(tab, event) {
            console.log(tab, event);
          },
          //解决el-input组件层级过深导致视图无法刷新
          change($event) {
            this.$forceUpdate($event);
          },
        },
        // 在创建之前，添加body的style属性， 给花名册组件单独设置背景色
        mounted() {
            this.queryVip()
          document.querySelector("body").setAttribute('style', "background-color: WhiteSmoke;")
        },
        // 在销毁前，将body的style属性删除
        beforeDestroy() {
          document.querySelector('body').removeAttribute('style')
        },
      }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .page{
        width: 80vw;
        background-color: White;
    }
    .features{
        padding-left: 1vw;
        padding-bottom: 10px;
    }
    .right_input{
        width: 10vw;
        margin-left: 30vw;
    }
    .right_button{
        margin-left: 1vw;
    }

    .name_text{
        width: 50% ;
        margin-left: 20px;

    }

    .xinxi{
        padding-bottom: 15px;
        text-align: left;
    }


    .dialog_level{
        width: 100%;

    }
    .dialog_phone{
        width: 100%;
    }
   .dialog_pwd xinxi{
        width: 100px;
    }
    .phone_email{
        width: 10vw;
    }
    .footer_title{
    }
    .select_phone_email{
        margin-left: 1vw;
    }

</style>